<template>
    <van-nav-bar
        title="赞和收藏"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item">
                <div id="list" @click="showHomepage">
                    <!-- 头像 -->
                    <div>
                        <van-image
                            round
                            width="3rem"
                            height="3rem"
                            :src="item.head" 
                            id="head"
                        />
                    </div>
                    <div id="info">
                        <van-row>{{item.name}}</van-row>
                        <van-row style="color:gray"><van-icon name="thumb-circle-o" size="20px"/>赞了你的笔记&nbsp;&nbsp;&nbsp;&nbsp;{{item.time}}</van-row>
                    </div>
                    <!-- 内容图片 -->
                    <div>
                        <van-image
                            width="3rem"
                            height="3rem"
                            :src="item.img" 
                            id="head"
                        />
                    </div>
                </div>
            </van-cell>
        </van-list>
    </van-pull-refresh>
</template>

<script>
export default {
    name: 'Edit',
    setup() {
    },
    data(){
        return{
            list:[
                {
                    head:require('../../assets/user.jpg'),
                    img:require('../../assets/logo.png'),
                    name:"宋智雅zia",
                    time:"2020-12-02"
                },
                {
                    head:require('../../assets/user.jpg'),
                    img:require('../../assets/logo.png'),
                    name:"宋智雅zia",
                    time:"2020-12-02"
                },
                {
                    head:require('../../assets/user.jpg'),
                    img:require('../../assets/logo.png'),
                    name:"宋智雅zia",
                    time:"2020-12-02"
                },
                {
                    head:require('../../assets/user.jpg'),
                    img:require('../../assets/logo.png'),
                    name:"宋智雅zia",
                    time:"2020-12-02"
                }
            ],
            loading:false,
            finished:false,
            refreshing:false
        }
    },
    methods: {
        onClickLeft(){
            this.$router.go(-1)
        },
        showHomepage(){
            this.$router.push('/homepage')
        },
        onLoad(){
            setTimeout(() => {
                if (this.refreshing) {
                    this.list = []
                    this.refreshing = false
                }

                for (let i = 0; i < 2; i++) {
                    this.list.push(this.list.length + 1)
                }
                this.loading = false

                if (this.list.length >= 40) {
                    this.finished = true
                }
            }, 1000)
        },
        onRefresh(){
            this.finished = false
            this.loading = true
            this.onLoad
        }
    },
}
</script>

<style scoped>
#list{
    height: 60px;
    display: flex;
}
#head{
    padding-top: 10px;
}
#info{
    width: 300px;
    padding-top: 10px;
    margin-left: 10px
}
</style>